<template>
  <div id="inductionSetting_table">
    <div class="header">
      <div class="left">
        <span class="top1">功能介绍</span>
        <span class="bottom1">设置入职登记表和入职材料</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="right">
        <div class="btn" @click="goregisterFormAdd(0)"><span class="iconfont">&#xeaef;</span><span class="text">添加入职登记表</span></div>
      </div>
    </div>
    <div class="items">
      <div class="item" v-for="item in items" :key="item.registerID">
        <div class="top1">{{ item.name }}</div>
        <div class="img"></div>
        <div class="btns">
          <el-button type="default" @click="goregisterFormAdd(1, item.registerID)">编辑</el-button>
          <el-button type="primary" @click="openUrl(item)">预览</el-button>
        </div>
      </div>
    </div>
    <!-- // 点击使用 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClosedialog" :destroy-on-close="true">
      <iframe :src="webSiteUrl" v-if="dialogVisible"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import common from "./mixins/common";
export default {
  data() {
    return {
      Ispreview: true,
      dialogloading: false,
      items: [],
      height: "",
    };
  },
  mixins: [common],
  activated() {
    console.log(this.$route.params, "this.$route.params");
    if (this.$route.params?.Privew?.isShow) {
      this.openUrl({
        registerID: this.$route.params.Privew.id,
        name: this.$route.params.Privew.name,
      });
    }
    this.GetPage();
  },
  methods: {
    goregisterFormAdd(type, id) {
      this.$router.push({ name: "registerForm", query: { isEdit: type == 1, id: id } });
    },
    GetPage() {
      let params = {
        PageIndex: 1,
        PageSize: 9999999,
      };
      this.$api.settingApi.GetPage(params).then((res) => {
        console.log(res, "res");
        this.items = res.data.data.data;
      });
    },
  },
};
</script>
<style lang="less" scoped>
#inductionSetting_table {
  height: 100%;
  overflow: hidden;
  .header {
    width: 100%;
    height: 60px;
    background-color: #f7f8fc;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    align-items: center;
    .left {
      width: 85%;
      height: 100%;
      display: flex;
      flex-flow: column;
      padding: 10px 15px;
      .top {
        font-size: 16px;
        font-weight: bold;
      }
      .bottom1 {
        color: #949599;
        font-size: 12px;
      }
    }
    .right {
      width: 15%;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          font-size: 20px;
        }
        .text {
          font-size: 14px;
        }
      }
    }
    .right div:hover {
      color: #39a4ef;
      cursor: pointer;
    }
  }
  .items {
    height: calc(100% - 120px);
    overflow: auto;
    padding: 18px 0px;
    display: flex;
    width: 100%;
    flex-flow: wrap;
    .item {
      width: 16%;
      max-height: 50%;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 0px 10px #d4dcf0;
      padding: 15px;
      border-radius: 12px;
      margin-left: 50px;
      margin-bottom: 30px;
      .img {
        margin: 20% 0;
        width: 150px;
        height: 150px;
        background-image: url("../../../../assets/images/personnel/registerTable.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .btns {
        display: flex;
        justify-content: space-around;
        width: 100%;
        .el-button {
          width: 80px;
          height: 30px;
        }
      }
    }
  }

  :deep(.phone_body_temploy ){
    width: 400px !important;
    border-radius: 30px;
    .phone_count_prvew {
      // height: 600px;
      // overflow: auto;
      .phone {
        width: 400px;
        height: 680px;
        // box-shadow: 1px 1px 20px 0px #ccc;
        // overflow: auto;
        border-radius: 30px;
        padding: 10px;
        // margin: 20px 0 20px 80px;
        margin: 0;
        position: relative;
        .form {
          height: 100%;
          border-radius: 30px;
          border: 1px solid #ccc;
          box-sizing: border-box;
          background-color: #f7f7f7;
          .iconfont {
            position: absolute;
            right: -18px;
            top: -10px;
            font-size: 15px;
            cursor: pointer;
            color: white;
          }
        }
        .form_body {
          height: calc(100% - 90px);
          overflow: auto;
          background-color: #fff;
          margin-top: 45px;
          .el-form-item {
            margin-bottom: 10px;
          }
          .demo-formLabelList {
            // height: 100% !important;
          }
          .demo-formLabelList-m {
            span {
              margin-left: 10px;
            }
            span:before {
              left: 0px;
            }
          }
        }
        .title {
          width: 378px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          position: absolute;
          box-sizing: border-box;
          border-radius: 0;
          border-top-left-radius: 30px;
          border-top-right-radius: 30px;
          border-bottom: 1px solid #ccc;
          font-weight: 700;
          background-color: #fff;
          box-sizing: border-box;
        }
      }
    }
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      border-radius: 30px;
    }
  }
  :deep( .el-dialog__wrapper) {
    .el-dialog {
      height: 80%;
      .el-dialog__body {
        height: 90%;
        iframe {
          border: none;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
